<template>
  <a-card>
    <a-row style="margin-bottom: 10px">
      <a-col :span="24">
        <a-form
          layout="inline"
          :form="form"
          @submit="handleSubmit"
        >
          <!-- <a-form-item label="颜色编号">
            <a-input placeholder="请输入颜色编号" v-decorator="['code']"></a-input>
          </a-form-item> -->
          <a-form-item label="颜色名称">
            <a-input
              allow-clear
              placeholder="请输入颜色名称"
              v-decorator="['name']"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
            >搜索</a-button>
            <a-button
              type="primary"
              @click="resetForm"
              style="margin-left: 10px"
            >重置</a-button>
            <a-button
              type="primary"
              style="margin-left: 10px"
              @click="add('')"
            >新增</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <a-table
      bordered
      :columns="columns"
      :rowKey="(record) => record.colorNo"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
      <template
        slot="code"
        slot-scope="txt, record"
      >
        <span class="code" @click="copy(record)">{{record.patternCode}}-{{record.name}}</span>
      </template>
       <template
          slot="cover"
          slot-scope="txt, record"
        >
         <div style="text-align: center;">
          <a-switch :default-checked="record.cover==1" :checked="record.cover==1" @change="choose(record, $event ? ischoose : noChoose)">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </div>
        <!-- <div v-else style="text-align: center;">
          <a-switch @change="choose(record, $event ? ischoose : noChoose)">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </div> -->
        </template>
      <template
        slot="image"
        slot-scope="txt, record"
      >
        <img
          v-for="(item, index) in record.images"
          :key="`${record.id}-${index}`"
          style="width: 50px; height: 50px; margin-right: 10px"
          @click="prevImg(item.image)"
          :src="item.url"
          alt=""
        />
      </template>
      <template
        slot="action"
        slot-scope="txt, record"
      >
        <a
          class="mr-10"
          @click="add(record)"
        >
          <a-icon type="edit" />编辑
        </a>
        <a
          class="mr-10"
          @click="deleteRecord(record)"
        >
          <a-icon type="delete" />删除
        </a>
        <a
          class="mr-10"
          @click="update(record)"
        >
          <a-icon type="edit" />重新上传
        </a>
        <a
          class="mr-10"
          @click="show(record)"
        >
          <a-icon type="unordered-list" />历史版本
        </a>
        <!-- <a><a-icon type="unordered-list" />查看日志</a> -->
      </template>
    </a-table>
    <div>
      <a-button
        type="primary"
        @click="$router.go(-1)"
      > 返回 </a-button>
    </div>
    <create
      v-if="showAdd"
      :color="color"
      :patternId="patternId"
      :brandName="brandName"
      @close="close"
    ></create>
    <update
      v-if="showUpdate"
      :color="color"
      :brandName="brandName"
      :patternId="patternId"
      @close="closeUpload"
    ></update>
    <editionList
      v-if="showInfo"
      :color="color"
      :patternId="patternId"
      @close="closeInfo"
    ></editionList>
    <a-modal
      v-model="visible"
      title="图片预览"
      @ok="visible = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>
    </a-modal>
  </a-card>
</template>
<script>
import create from './create.vue'
import update from './update.vue'
import editionList from './editionList.vue'
import { listMixin } from '../util/listMixin'
import { currencyUpdate} from '@api/pattern/index.js'

const columns = [
  {
    title: '编号-颜色名称',
    scopedSlots: { customRender: 'code' },
    width: 200,
  },
  
  {
    title: '图片',
    scopedSlots: { customRender: 'image' },
  },
  {
    title: '是否封面',
    dataIndex: 'cover',
    scopedSlots: { customRender: 'cover' },
    width: 200,
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  mixins: [listMixin],

  components: {
    create,
    editionList,
    update,
  },

  data() {
    return {
      ischoose: 1,
      noChoose: 0,
      columns,
      showAdd: false,
      showInfo: false,
      showUpdate: false,
      element: null,
      prevImageUrl: '',
      visible: false,
      urlKey: 'color',
      color: null,
    }
  },

  computed: {
    patternId() {
      return this.$route.query.patternId || ''
    },
     brandName() {
      return this.$route.query.brand || ''
    },
  },
  methods: {
    prevImg(url) {
      if (typeof url == 'string' && url != '') {
        this.prevImageUrl = url
        this.visible = true
      }
    },
    copy(record) {
      const content = record.patternCode + '-' + record.name
      var domUrl = document.createElement('input')
      domUrl.value = content
      domUrl.id = 'creatDom'
      document.body.appendChild(domUrl)
      domUrl.select() // 选择对象
      document.execCommand('Copy') // 执⾏浏览器复制命令
      let creatDom = document.getElementById('creatDom')
      creatDom.parentNode.removeChild(creatDom)
     this.$message.success("复制成功")
    },
     async choose(record,cover) {
        const colorParams = {
          id:record.id,
          patternId:record.patternId,
          jobNumber:this.jobNumber,
          name:record.name,
          cover:cover,
          code: record.code,
        }
        const res = await currencyUpdate('color', colorParams)
        if(res.code == 200){
          this.$message.success("切换成功！")
          this.loadData()
        }
    },
    close() {
      this.showAdd = false
      this.loadData(1)
    },
    closeInfo() {
      this.showInfo = false
      this.loadData(1)
    },
    closeUpload() {
      this.showUpdate = false
      this.loadData(1)
    },
    add(color) {
      this.showAdd = true
      this.color = color
       
    },
    update(color) {
      this.color = color
      this.showUpdate = true
    },
    show(color) {
      this.color = color
      this.showInfo = true
    },
  },
}
</script>

<style scoped lang="less">
.code{
  cursor: pointer;
}
.mr-10 {
  margin-right: 10px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>